<template>

    <div class="box">
      <div class="account">账号<span></span></div>

      <div class="top">
         <div class="Head-name-sign_in">
           <div class="top_left">
             <span class="border"> <img :src="img" alt="" class="img_tx"></span>
           </div>
           <div class="top_zhong">
             <p>{{nickname}}</p>
             <div class="grade">Lv.{{grade}}</div>
           </div>
           <div class="top_right">
             <span class="sign-in">签到</span>
           </div>
         </div>
         <div class="dynamic-attention">
           <ul>
             <li>
               <div class="dynamic">动态</div>
               <div class="number">{{dynamic}}</div>
             </li>
             <li @click="follows">
               <div class="dynamic">关注</div>
               <div class="number">{{follow}}</div>
             </li>
             <li>
               <div class="dynamic">粉丝</div>
               <div class="number">{{fens}}</div>
             </li>
           </ul>
           <div class="data">
             <div class="data_dynamic">
               <span class="dian"></span>
             </div>
             <div class="data_number">我的资料</div>
           </div>
         </div>
      </div>

      <div class="zhong">

        <div class="information">

             <div class="information_left">
               <div class="logo1">
                 <img src="../assets/account/email.png" alt="" class="logo_img">
               </div>
               <div class="text" @click="news">我的信息</div>
             </div>

             <div class="information_right">
               <span class="img">
                  <img src="../assets/account/head.png" alt="">
               </span>
               <span class="xiayige">
                 <img src="../assets/account/next.png" alt="">
               </span>
             </div>
           </div>

        <div class="zhong_2">
          <div class="information2">

            <div class="information_left2">
              <div class="logo1">
                <img src="../assets/account/VIP.png" alt="" class="logo_img">
              </div>
            </div>

            <div class="information_right2">
              <div class="text2">会员中心</div>
              <span class="text2_2">新课特惠</span>
              <span class="img2">
                  <img src="../assets/account/head.png" alt="">
               </span>
              <span class="xiayige">
                 <img src="../assets/account/next.png" alt="">
               </span>
            </div>

          </div>
          <div class="information2">

            <div class="information_left2">
              <div class="logo1">
                <img src="../assets/account/mark.png" alt="" class="logo_img">
              </div>
            </div>

            <div class="information_right2">
              <div class="text2">商城</div>
              <span class="text2_2">运动蓝牙 29</span>
              <span class="img2">
                  <img src="../assets/account/head.png" alt="">
               </span>
              <span class="xiayige">
                 <img src="../assets/account/next.png" alt="">
               </span>
            </div>

          </div>
          <div class="information2">

            <div class="information_left2">
              <div class="logo1">
                <img src="../assets/account/online.png" alt="" class="logo_img">
              </div>
            </div>

            <div class="information_right2">
              <div class="text2">在线听歌免流量</div>
              <span class="text2_2"></span>
              <span class="img2">
               </span>
              <span class="xiayige">
                 <img src="../assets/account/next.png" alt="">
               </span>
            </div>

          </div>
        </div>

        <div class="zhong_3">
          <div class="information2">

            <div class="information_left2">
              <div class="logo1">
                <img src="../assets/account/set.png" alt="" class="logo_img">
              </div>
            </div>

            <div class="information_right2">
              <div class="text2">设置</div>
              <span class="text2_2"></span>
              <span class="img2">
               </span>
              <span class="xiayige">
                 <img src="../assets/account/next.png" alt="">
               </span>
            </div>

          </div>
          <div class="information2">

            <div class="information_left2">
              <div class="logo1">
                <img src="../assets/account/scan.png" alt="" class="logo_img">
              </div>
            </div>

            <div class="information_right2">
              <div class="text2">扫一扫</div>
              <span class="text2_2"></span>
              <span class="img2">
               </span>
              <span class="xiayige">
                 <img src="../assets/account/next.png" alt="">
               </span>
            </div>

          </div>
          <div class="information2">

            <div class="information_left2">
              <div class="logo1">
                <img src="../assets/account/night.png" alt="" class="logo_img">
              </div>
            </div>

            <div class="information_right2">
              <div class="text2">个性皮肤</div>
              <span class="text2_3">官方红</span>

              <span class="xiayige">
                 <img src="../assets/account/next.png" alt="">
               </span>
            </div>

          </div>
          <div class="information2">

            <div class="information_left2">
              <div class="logo1">
                <img src="../assets/account/deng.png" alt="" class="logo_img">
              </div>
            </div>

            <div class="information_right2">
              <div class="text2">夜间模式</div>
              <div class="switch">
               <van-switch
                 v-model="checked"
                 size="25px"
               />
               </div>
            </div>

          </div>
          <div class="information2">

          <div class="information_left2">
            <div class="logo1">
              <img src="../assets/account/timing.png" alt="" class="logo_img">
            </div>
          </div>

          <div class="information_right2">
            <div class="text2">定时关闭</div>
            <span class="text2_2"></span>
            <span class="img2">
               </span>
            <span class="xiayige">
                 <img src="../assets/account/next.png" alt="">
               </span>
          </div>

        </div>
          <div class="information2">

            <div class="information_left2">
              <div class="logo1">
                <img src="../assets/account/slock.png" alt="" class="logo_img">
              </div>
            </div>

            <div class="information_right2">
              <div class="text2">音乐闹钟</div>
              <span class="text2_2"></span>
              <span class="img2">
               </span>
              <span class="xiayige">
                 <img src="../assets/account/next.png" alt="">
               </span>
            </div>

          </div>
          <div class="information2">

            <div class="information_left2">
              <div class="logo1">
                <img src="../assets/account/car.png" alt="" class="logo_img">
              </div>
            </div>

            <div class="information_right2">
              <div class="text2">驾驶模式</div>
              <span class="text2_2"></span>
              <span class="img2">
               </span>
              <span class="xiayige">
                 <img src="../assets/account/next.png" alt="">
               </span>
            </div>

          </div>
          <div class="information2">

            <div class="information_left2">
              <div class="logo1">
                <img src="../assets/account/boy.png" alt="" class="logo_img">
              </div>
            </div>

            <div class="information_right2">
              <div class="text2">亲子频道</div>
              <span class="text2_2"></span>
              <span class="img2">
               </span>
              <span class="xiayige">
                 <img src="../assets/account/next.png" alt="">
               </span>
            </div>

          </div>
          <div class="information2">

            <div class="information_left2">
              <div class="logo1">
                <img src="../assets/account/icecream.png" alt="" class="logo_img">
              </div>
            </div>

            <div class="information_right2">
              <div class="text2">小兵电台</div>
              <span class="text2_2"></span>
              <span class="img2">
               </span>
              <span class="xiayige">
                 <img src="../assets/account/next.png" alt="">
               </span>
            </div>

          </div>
          <div class="information2">

            <div class="information_left2">
              <div class="logo1">
                <img src="../assets/account/dcoupon.png" alt="" class="logo_img">
              </div>
            </div>

            <div class="information_right2">
              <div class="text2">优惠券</div>
              <span class="text2_2"></span>
              <span class="img2">
               </span>
              <span class="xiayige">
                 <img src="../assets/account/next.png" alt="">
               </span>
            </div>

          </div>
        </div>

        <div class="zhong_4">
          <div class="information2">

            <div class="information_left2">
              <div class="logo1">
                <img src="../assets/account/join.png" alt="" class="logo_img">
              </div>
            </div>

            <div class="information_right2">
              <div class="text2">加入网易云音乐</div>
              <span class="text2_2"></span>
              <span class="img2">
               </span>
              <span class="xiayige">
                 <img src="../assets/account/next.png" alt="">
               </span>
            </div>

          </div>
          <div class="information2">

            <div class="information_left2">
              <div class="logo1">
                <img src="../assets/account/share.png" alt="" class="logo_img">
              </div>
            </div>

            <div class="information_right2">
              <div class="text2">分享网易云音乐人</div>
              <span class="text2_2"></span>
              <span class="img2">
               </span>
              <span class="xiayige">
                 <img src="../assets/account/next.png" alt="">
               </span>
            </div>

          </div>
          <div class="information2">

            <div class="information_left2">
              <div class="logo1">
                <img src="../assets/account/about.png" alt="" class="logo_img">
              </div>
            </div>

            <div class="information_right2">
              <div class="text2">关于</div>
              <span class="text2_2"></span>
              <span class="img2">
               </span>
              <span class="xiayige">
                 <img src="../assets/account/next.png" alt="">
               </span>
            </div>

          </div>
        </div>

        <div class="zhong_5" @click="logout">
          退出登录
        </div>

      </div>

      <div class="xia"></div>

      <v-footer></v-footer>
    </div>

</template>


<script>
  import footer from "@/components/footer/"
     export default {
          name: "account",
       data() {
         return {
           id: this.$storage.get('user').account.id,
           img: this.$storage.get('user').profile.avatarUrl,
           nickname: this.$storage.get('user').profile.nickname,
           grade: '',
           follow: '',
           fens: '',
           dynamic: '',
           checked: false,
         };
       },
       components: {
         'v-footer': footer,
       },
       created() {

         this.$http.get(`/api/user/detail?uid=${this.id}`).then((res) => {
           console.log(res.data);
           //等级
           this.grade = res.data.level;
           //关注
           this.follow = res.data.profile.newFollows;
         });
         // 1.获取粉丝列表
         this.$http.get(`/api/user/event?uid=${this.id}&limit=1`).then((res) => {
           // 获取粉丝数
           this.fens = res.data.events.length;
           // eslint-disable-next-line no-unused-vars
         }).catch((err) => {});

         // 2.获取用户关注列表
         this.$http.get(`/api/user/event?uid=${this.id}`).then((res) => {
           // 获取关注个数
           this.dynamic = res.data.events.length;
           // eslint-disable-next-line no-unused-vars
         }).catch((err) => {});
       },
       methods: {
         follows(){
           this.$router.push({ name: 'follow' });
         },
         news(){
           this.$router.push({ name: 'news' });
         },
         exit() {
           Dialog.confirm({
             title: '提示',
             message: '确定要退出吗？',
           }).then(() => {
             this.$http.get('http://localhost:3000/logout').then(() => {
               this.$storage.remove('user');
             });
           });
         },
         logout() {
           // eslint-disable-next-line no-unused-vars
           this.$http.get('http://localhost:3000/logout').then((res) => {
             this.$router.push({ name: 'login' });
             // eslint-disable-next-line no-unused-vars
           }).catch((res) => {});
         },
       },
     }
</script>

<style scoped>
  .box{
    width: 100vw;
    background: #EFEFF0;
    margin-bottom: 50px;

  }
  .account{
    width: 100vw;
    height: 50px;
    line-height: 50px;
    text-align: center;
    font-size: 17px;
    background: #C54A3D;
    color: #ffff;
    position: fixed;
    z-index:100;
  }
  .account span{
    width: 30px;
    height: 30px;
    display: inline-block;
    position: absolute;
    top: 10px;
    right: 12px;
    background: url("../assets/icon/menu.png") no-repeat 2px 5px;
    background-size: 22px;
  }
  .top{
    width: 100vw;
    height: 140px;
    background: #fff;
    position: relative;
    top: 50px;
  }
  .Head-name-sign_in{
    width: 100vw;
    height: 80px;
    border-bottom: 1px solid #E9EAEB;
  }
  .top_left{
    width: 20vw;
    height: 80px;
    float: left;
  }
  .top_zhong{
    width: 60vw;
    height: 80px;
    float: left;
  }
  .top_zhong p{
    height: 40px;
    line-height:60px;
    font-size: 16px;
  }
  .grade{
    width: 30px;
    height: 12px;
    line-height: 12px;
    border-radius: 45px;
    border: 1px solid #C2C2C2;
    font-size: 10px;
    color: #999999;
    text-align: center;
    margin-top: 3px;
  }
  .top_right{
    width: 20vw;
    height: 80px;
    float: left;
    position: relative;
  }
  .border{
    width: 50px;
    height: 50px;
    margin-top: 13px;
    margin-left: 15px;
    border-radius: 45px;
    display: inline-block;
    overflow: hidden;

  }
  .sign-in{
    width: 52px;
    height: 18px;
    line-height: 18px;
    border-radius: 45px;
    border: 1px solid #C04235;
    color: #C04235;
    display: inline-block;
    font-size: 11px;
    text-indent: 25px;
    position: absolute;
    top: 30px;
    right: 15px;
    background: url("../assets/account/qiandao.png") no-repeat 8px 3px;
    background-size: 12px;
  }
  .dynamic-attention{
    width: 100vw;
    height:50px;
    position: relative;

  }
  ul{
    width: 74%;
    height: 40px;
    margin-top: 8px;

  }
  li{
    width: 90px;
    height: 40px;
    border-right: 1px solid #F1F2F3;
    float: left;
  }
  .dynamic{
    width: 100%;
    height: 20px;
    color: #959697;
    text-align: center;
    font-size: 14px;

  }
  .number{
    width: 100%;
    height: 14px;
    color: #29292A;
    font-weight: bold;
    text-align: center;
    font-size: 16px;
  }
  .data{
    width: 25%;
    height: 50px;
    position: absolute;
    top: 0;
    right: 0;
  }
  .data_dynamic{
    width: 30px;
    height: 20px;
    background: red;
    margin-left: 38px;
    background: url("../assets/account/pencel.png") no-repeat;
    background-size: 18px;
  }
  .data_number{
    width: 90px;
    height: 20px;
    font-size: 14px;
    text-align: center;
    font-weight: bold;
    color: #646566;
  }
  .dian{
    width: 10px;
    height: 10px;
    display: inline-block;
    background: #C2463A;
    border-radius: 45px;
    position: absolute;
    top: 0;
    right: 23px;
  }

  .zhong{
    width: 100vw;
    background: #EFEFF0;
    position: absolute;
    top: 190px;
    margin-bottom: 50px;
  }
  .information{
      width: 100vw;
      height: 40px;
      background: #fff;
      margin-top: 8px;
      position: relative;
    }
  .information2{
    width: 100vw;
    height: 40px;
    background: #fff;
    position: relative;
    margin-top: 1px;
  }
  .information_left{
    width: 50vw;
    height: 40px;
    float: left;
  }
  .information_left2{
    width: 11vw;
    height: 40px;
    float: left;
  }
  .information_right{
    width: 50vw;
    height: 40px;
    float: left;
  }
  .information_right2{
    width: 89vw;
    height: 40px;
    float: left;
    border-bottom: 1px solid #F5F5F6;
  }
  .logo1{
    width: 25px;
    height: 25px;
    margin-top: 8px;
    margin-left: 8px;
    float: left;
  }
  .logo_img{
    display: block;
    width: 19px;
    margin-top: 5px;
    margin-left: 5px;
  }
  .text{
    width: 100px;
    height: 40px;
    line-height: 40px;
    color: #2F2F30;
    font-size: 15px;
    float: left;
    text-indent: 10px;
  }
  .text2{
    width: 120px;
    height: 40px;
    line-height: 40px;
    color: #2F2F30;
    font-size: 15px;
    float: left;
  }
  .img{
    width: 42px;
    height: 26px;
    border-radius: 45px;
    display: block;
    margin-left: 110px;
    margin-top: 8px;
  }
  .img2{
    width: 30px;
    height: 30px;
    overflow: hidden;
    border-radius: 45px;
    display: block;
    margin-left: 275px;
    margin-top: 8px;
  }
  .img img,.img2 img{
    width: 42px;
    display: block;
    margin-left: 2px;
  }
  .xiayige{
    width: 22px;
    height: 24px;
    display: block;
    position: absolute;
    top: 10px;
    right: 5px;
  }

  .xiayige img{
    display: block;
    width: 10px;
    margin-top: 3px;
    margin-left: 10px;
  }
  .img_tx{
    display: block;
    width: 50px;
    height: 50px;

  }
  .text2_2{
    width: 100px;
    height: 40px;
    line-height: 40px;
    text-align: right;
    color: #B1B2B2;
    display: block;
    font-size: 16px;
    position: absolute;
    top: 0;
    right: 70px;
  }
  .zhong_2{
    width: 100vw;
    height: 123px;
    background: #fff;
    margin-top: 8px;
  }
  .zhong_3{
    width: 100vw;
    height: 400px;
    background: #fff;
    margin-top: 8px;
  }
  .text2_3{
    width: 100px;
    height: 40px;
    line-height: 40px;
    text-align: right;
    color: #B1B2B2;
    display: block;
    font-size: 14px;
    position: absolute;
    top: 0;
    right: 30px;
  }
  .switch{
    display: block;
    position: absolute;
    top: -20px;
    right: 5px;
  }
  .zhong_4{
    width: 100vw;
    height: 123px;
    background: #fff;
    margin-top: 18px;
  }
  .zhong_5{
    width: 100vw;
    height: 40px;
    background: #fff;
    margin-top: 8px;
    font-size: 16px;
    text-align: center;
    color: #C65449;
    line-height: 40px;
    border-bottom: 8px solid #EFEFF0;
  }

</style>
